<template>
	<view class="box">
		<view class="title">
			<uni-icons type="info-filled" color="#F5AC4F" size="30"></uni-icons>
			<view class="">
				请勿发送黄赌毒信息，严禁广告，违规封号
			</view>
		</view>
		<view class="name">任务描述</view>
		<view class="iptBox">
			<view class="ipt">
				<input type="text" placeholder="请输入"  v-model="taskTitle"/>
			</view>
		</view>
		<view class="name">任务照片</view>
		<view class="iptBox">
			<view class="ipt flexleft" style="flex-wrap: wrap;">
				<view class="tupianbox flexcenter margin_top" v-for="(item,index) in upImg" :key="index">
					<view class="tupian radius">
						<image class="radius upimage" :src="item" mode=""></image>
						<image class="shanchu" src="../../../static/delimg.png" @click="deleimgae(index)"
							mode=""></image>
					</view>
				</view>
				<view class="tupianbox flexcenter margin_top" @click="uploadImg" v-show="upImg.length>=6?false:true">
					<view class="tupians shangchuan radius">
						<image class="upimages" src="../../../static/jiahao.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="uploadMask">上传任务</view>
	</view>
</template>

<script>
	import httpRequest from '@/commonFun/httpRequest.js'
	export default {
		data() {
			return {
				taskTitle:'',
				upImg:[],
				upImg_text:[],
				id:'',
			}
		},
		onLoad(options) {
			let _this = this;
			_this.id = options.id;
		},
		methods: {
			// 删除上传图片
			deleimgae(index) {
				this.upImg.splice(index, 1)
				this.upImg_text.splice(index, 1)
			},
			//上传图片
			uploadImg() {
				let _this = this;
				let upImgs = _this.upImg;
				let num = 6 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							console.log(123)
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									console.log(res[i])
									_this.uploadImageService(res[i])
								}
							}).catch(err => {
								console.log(err);
							});
						}
					},
					fail: function(res) {
						console.log(res);
					}
				});
			},
			// 详情转载
			uploadImageService(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					_this.upImg.push(res.fullurl);
					_this.upImg_text.push(res.url)
				}).catch(err => {
					console.log(err);
				});
			},
			uploadMask(){
				let that = this;
				if(that.taskTitle == ''){
					httpRequest.toast('请输入任务描述');
					return false
				}
				if(that.upImg.length == 0){
					httpRequest.toast('请上传任务图片');
					return false
				}
				httpRequest.request('/customapi/user/submitCLrw','POST',{
					des:this.taskTitle,
					id:that.id,
					images:that.upImg_text.join(','),
				}).then(res => {
					if(res.code == 1){
						httpRequest.toast(res.msg);
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}else{
						httpRequest.toast(res.msg);
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.shanchu {
		width: 31rpx;
		height: 30rpx;
		position: absolute;
		left: 45%;
		bottom: -7%;
	}
	.tupianbox {
		width: 33.33%;
		margin-bottom: 20rpx;
	}
	
	.tupian {
		position: relative;
		width: 170rpx;
		height: 170rpx;
		.upimage{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}
	.tupians{
		position: relative;
		border-radius: 10rpx;
		border: 4rpx solid #999999;
		padding: 80rpx;
		.upimages {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 40%;
			left: 40%;
		}
	}
.box{
	height: 90vh;
	background-color: #ffffff;
	padding: 40rpx 50rpx 0rpx 50rpx;
	.btn{
		background: #F5AC4F;
		border-radius: 20rpx;
		text-align: center;
		color: #ffffff;
		padding: 34rpx;
		position: absolute;
		bottom: 60rpx;
		width: 78vw;
		// margin-top: 50vh;
		// margin-top: 340px;
	}
	.title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		align-items: center;
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	.name{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}
	.iptBox{
		border-bottom: 1px solid #999999;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.ipt{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
		}
	}
	.select{
		padding: 20rpx 57rpx;
	}
}
</style>
